import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Modal, Form, Row, Col, Input, Switch, Space } from "antd";
import TipsIcon from "../../../../assets/images/dapp/tip_icon.svg";
import DarkTipIcon from "../../../../assets/images/dapp/dark_tip.png";
import CircleCheckedIcon from "../../../../assets/images/dapp/circleChecked.svg";

export const IndexRegulationSettingModal = React.forwardRef(
  ({ handleCloseSetting, visible }, ref) => {
    const { t } = useTranslation();
    const [swicthStatus, setSwicthStatus] = useState(false);
    const onChangeSwitch = (val) => {
      setSwicthStatus(val);
    };
    return (
      <Modal
        open={visible}
        width={631}
        title={t("dappIndexRegulation.settingTitle")}
        footer={null}
        className="index-regulation-modal"
        onCancel={() => handleCloseSetting()}
      >
        <div className="setting-form-box">
          <Form layout="vertical">
            <Row gutter={12}>
              <Col span={24}>
                <Form.Item
                  label={t("dappIndexRegulation.productLaunchSettings")}
                >
                  {swicthStatus ? (
                    <div className="open-status">
                      <img src={CircleCheckedIcon}></img>
                      <div className="text">
                        {t("dappIndexRegulation.started")}
                      </div>
                    </div>
                  ) : (
                    <div className="switch-row">
                      <Switch onChange={onChangeSwitch} size="big" />
                      {!swicthStatus ? (
                        <div className="tips-box">
                          <img src={TipsIcon}></img>
                          <div className="tip-text">
                            {t("dappIndexRegulation.waitingStart")}
                          </div>
                        </div>
                      ) : null}
                    </div>
                  )}
                </Form.Item>
                <div className="notice-row">
                  {t("dappIndexRegulation.settingNotice")}
                </div>
              </Col>

              <Col span={24}>
                <Form.Item className="price-item">
                  <Space.Compact>
                    <Input
                      className="input-label"
                      disabled={true}
                      defaultValue={t("dappIndexRegulation.issuePrice")}
                    />
                    <Input className="input-value" />
                  </Space.Compact>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item className="price-item">
                  <Space.Compact>
                    <Input
                      className="input-label"
                      disabled={true}
                      defaultValue={t("dappIndexRegulation.initialConstant")}
                    />
                    <Input
                      disabled={true}
                      className="input-value-disabled"
                    />
                  </Space.Compact>
                </Form.Item>
              </Col>
              <div className="bottom-tip-box">
                <img src={DarkTipIcon}></img>
                <div className="tip-text">
                  {t("dappIndexRegulation.bottomTips")}
                </div>
              </div>
            </Row>
          </Form>
        </div>
      </Modal>
    );
  }
);
